<template>
	<div>
		<!-- 标题 -->
		<van-sticky>
			<van-nav-bar
				title="商品详情"
				left-text="返回"
				left-arrow
				@click-left="$router.back()"
			>
				<template #right @click="onClickRight">
					<van-icon name="ellipsis" size="20" />
				</template>
			</van-nav-bar>
		</van-sticky>

		<!-- 商品详情 -->
		<van-image
			width="100%"
			height="400"
			fit="cover"
			:src="goodslist[0].goodsCoverImg"
		/>
		<div class="p-3">
			<p>{{ goodslist[0].goodsName }}</p>
			<p class="c1">免邮费 顺丰快递</p>
			<p style="color: #f2270c">￥{{ goodslist[0].sellingPrice }}</p>
		</div>

		<van-grid
			:gutter="1"
			style="background-color: rgba(169, 169, 169, 0.493); padding-left: 0px"
			:border="false"
			:column-num="4"
		>
			<van-grid-item text="概述" />
			<van-grid-item text="参数" />
			<van-grid-item text="安装服务" />
			<van-grid-item class="pr-3" text="常见问题" />
		</van-grid>

		<p v-html="goodslist[0].goodsDetailContent"></p>
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" />
			<van-goods-action-icon
				icon="cart-o"
				text="购物车"
				@click="goto('/cart')"
			/>
			<van-goods-action-button
				color="#be99ff"
				type="warning"
				text="加入购物车"
				@click="addCart"
			/>
			<van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
		</van-goods-action>
	</div>
</template>

<script>
import { Toast } from "vant";
export default {
	data() {
		return {
			goodslist: [],
		};
	},
	created() {
		// console.log(this.$route.params.id);
		this.$axios.get("goods/detail/" + this.$route.params.id).then((data) => {
			this.goodslist.push(data.data);
		});
	},
	mounted() {
		this.$parent.showTabbar = false;
	},
	destroyed() {
		this.$parent.showTabbar = true;
	},
	methods: {
		onClickRight() {},
		goto(url) {
			this.$router.push(url);
		},
		addCart() {
			// const { data, resultCode } = await addCart({ goodsCount: 1, goodsId: this.detail.goodsId })
			// ----------------------------------------------------------
			this.$axios
				.post("/shop-cart", {
					goodsCount: 1,
					goodsId: this.goodslist[0].goodsId,
				})
				.then((data) => {
					// console.log(data);
					if (data.resultCode == 200) Toast.success("添加成功");
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.c1 {
	font-size: 14px;
	color: rgba(169, 169, 169, 0.952);
}
.pr-3 {
	padding-right: 0px !important;
	margin-left: 0px;
}
.p-3 {
	padding-left: 17px;
	padding-right: 17px;
}
</style>
